<template>
  <detail-page-top-tab>
    <template #top>
      <el-tabs v-model="activeName">
        <el-tab-pane label="老人信息" name="first"></el-tab-pane>
        <el-tab-pane label="家属信息" name="second"></el-tab-pane>
        <el-tab-pane label="健康信息" name="third"></el-tab-pane>
        <el-tab-pane label="服务需求" name="fourth"></el-tab-pane>
        <el-tab-pane label="服务订单" name="five"></el-tab-pane>
        <el-tab-pane label="老人优待证" name="six"></el-tab-pane>
      </el-tabs>
    </template>
    <template #middle>
      <div v-show="activeName == 'first'">
        <pub-detail-description
          :data="basicInfoDetail"
          :columns="basicInfoColumns"
        ></pub-detail-description>
      </div>
      <div v-show="activeName == 'second'">
        <pub-detail-description
          :data="basicInfoDetail"
          :columns="basicInfoColumns"
        ></pub-detail-description>
      </div>
      <div v-show="activeName == 'third'" class="wh-full">
        <list-page class="wh-full" :no-padding="true" >
          <pub-search
            v-model:searchColumns="searchColumns"
            v-model:search-form="searchForm"
            mask-append-to="table-content"
            @search="search"
          >
          </pub-search>
          <pub-table
            ref="pubTable"
            :column="columns"
            :data="tableData"
            :loading="tableLoading"
          >
            <template v-slot:option="scope">
              <el-button plain type="primary" @click="detail">详情</el-button>
              <el-button plain type="primary">编辑</el-button>
              <el-dropdown style="margin-left: 20px" size="medium">
                <el-button>
                  更多
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="del(scope.row)">
                      删除
                    </el-dropdown-item>
                    <el-dropdown-item
                      @click="familyInformationHandle(scope.row)"
                    >
                      家庭信息
                    </el-dropdown-item>
                    <el-dropdown-item
                      @click="healthRecordHandle(scope.row)"
                    >
                      健康档案
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </pub-table>
          <pub-pagination
            :total="pagination.total"
            v-model:page="pagination.page"
            v-model:limit="pagination.pageSize"
            @pagination="pagination.change"
          ></pub-pagination>
        </list-page>
      </div>
    </template>
    <template #bottom>
      <el-button size="small" type="primary" @click="emit('close')">
        关闭
      </el-button>
    </template>
  </detail-page-top-tab>
</template>
<script setup>
import { useTable } from '@/hooks/UseTable'
import { get_org_options } from '@/api/basicSetting'
import { useUserStore } from '@/pinia/modules/user'
const emit = defineEmits(['close'])
const router = useRouter()
const route = useRoute()
const activeName = ref('first')
const basicInfoDetail = ref({
  tel: '加了辣的减肥苦辣都放假卡德加反馈辣椒水反馈'
})
const basicInfoColumns = [
  { prop: 'name', label: '老人姓名' },
  { prop: 'cardTypeCode', label: '证件类型', type: 'dict', dictCode: 'ZJLX' },
  { prop: 'idCard', label: '证件号码' },
  { prop: 'idCard', label: '证件号码' },
  { prop: 'birthTime', label: '出生日期' },
  { prop: 'age', label: '年龄' },
  { prop: 'cancellationTime', label: '注销日期' },
  { prop: 'nationCode', label: '民族', type: 'dict', dictCode: 'MZ' },
  { prop: 'sexCode', label: '性别', type: 'dict', dictCode: 'XB' },
  { prop: 'nationalityCode', label: '国籍', type: 'dict', dictCode: 'GJ',span:3 },
  
  {
    type: 'imageGroup',
    prop: 'id',
    bizType: 'DataBaseElderHead',
    label: '老人头像',
    span: 3
  },
  {
    type: 'imageGroup',
    prop: 'id',
    bizType: 'DataBaseElderIdCardZ',
    label: '身份证国徽面',
    span: 3
  },
  {
    type: 'imageGroup',
    prop: 'id',
    bizType: 'DataBaseElderIdCardF',
    label: '身份证头像面',
    span: 3
  }
]
const getDetail = async () => {
}
const close = () => {
  router.back()
}
const searchColumns = ref([
  {
    label: '单位所属行政区划',
    el: 'AreaSelect',
    bind: 'areaCode',
    defaultValue: '',
    disabledLevel: useUserStore().orgInfo.level - 1,
    defaultArea: useUserStore().userAreaArr,
    labelWidth: 140
  },
  {
    label: '单位名称',
    el: 'Input',
    bind: 'name',
    defaultValue: '',
    labelWidth: 80
  },
  {
    label: '机构运营状态',
    el: 'DictSelect',
    bind: 'operationState',
    code: 'JGYYZT',
    defaultValue: '',
    labelWidth: 110
  },
  {
    label: '统一社会信用代码',
    el: 'Input',
    bind: 'creditCode',
    defaultValue: '',
    labelWidth: 140
  },

  {
    label: '机构性质',
    el: 'DictSelect',
    bind: 'orgType',
    defaultValue: '',
    code: 'JGXZ',
    labelWidth: 80
  },

  {
    label: '机构登记类型',
    el: 'DictSelect',
    bind: 'registrationType',
    defaultValue: '',
    code: 'JGDJLX',
    labelWidth: 110
  },

  {
    label: '是否县级特困人员供养服务机构',
    el: 'DictSelect',
    bind: 'isCountyPoverty',
    defaultValue: '',
    code: 'SF',
    labelWidth: 210
  },
  {
    label: '是否敬老院',
    el: 'DictSelect',
    bind: 'isRegionalNursingHome',
    defaultValue: '',
    code: 'SF',
    labelWidth: 110
  }
])
const columns = ref([
  { label: '单位名称', prop: 'name' },
  { label: '统一社会信用代码', prop: 'creditCode' },
  { label: '所属行政区划', prop: 'belongArea' },
  { label: '单位建立日期', prop: 'buildDate' },
  { label: '所在行政区划', prop: 'inArea', width: 200 },
  { label: '法定代表人或负责人姓名', prop: 'legalName', width: 190 },
  { label: '法定代表人或负责人联系方式', prop: 'legalPhone', width: 220 },
  {
    label: '机构运营状态',
    prop: 'operationState',
    type: 'formatDict',
    formatCode: 'JGYYZT',
    width: 140
  },
  { label: '操作', type: 'option', width: 200, fixed: 'right' }
])
const detail = () => {
  router.push({
    name: 'EJCD-detail',
    query: { id: 1 }
  })
}
let { tableData, search, getList, pagination, searchForm, tableLoading } =
  useTable(get_org_options)
// const router = useRouter()
onMounted(() => {
  // getDetail()
  // getList()
})
</script>
<style lang="scss" scoped>

</style>
